import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import Swiper from "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import {
  BannerWrapper
} from './style';

class Banner extends PureComponent {
  render() {
    const { banners } = this.props
    return (
      <BannerWrapper className="banner">
        <div className="swiper-container">
          <div className="swiper-wrapper">
            {
              banners.map(item => {
                return (
                  <div className="swiper-slide" key={item.get('imageUrl')}>
                    <img src={item.get('imageUrl')} alt="" />
                  </div>
                )
              })
            }
          </div>
        </div>
        <div className="swiper-pagination"></div>
      </BannerWrapper>
    )
  }

  componentDidMount() {
    this.initBanner()
  }

  // 初始化swiper
  initBanner() {
    setTimeout(() => {
      new Swiper('.swiper-container', {
        initialSlide: 0,
        slidesPerView: 3,
        spaceBetween: 30,
        slidesPerGroup: 3,
        loop: true,
        pagination: '.swiper-pagination',
        observer: true,
        observeParents: true,
      })
    }, 500)
  }
}

const mapState = (state) => {
  return {
    banners: state.getIn(['home', 'banners'])
  }
}

export default connect(mapState, null)(Banner);